<template>
  <div>
    <Nav :title="headName"></Nav>
    <!-- 主要内容 -->
    <div class="detail">
      <!-- 轮播 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in pics" :key="index">
          <img v-lazy="image.pic" />
        </van-swipe-item>
      </van-swipe>
      <!-- 价格数据 -->
      <div class="price">
        <div class="price_left">
          <div class="price_item">
            <span class="money">￥</span>
            <span class="sale">{{ basicInfo.minPrice }}</span>
            <span class="hot">热销{{ basicInfo.stores }}件</span>
          </div>
          <div class="old_item">
            <span>${{ basicInfo.originalPrice }}</span>
          </div>
        </div>
        <div class="price_right">
          <img src="@/assets/da.png" alt="" />
          <div class="end">距结束仅剩</div>
          <div class="time_count">
            <span class="num">10</span>
            <span>:</span>
            <span class="num">27</span>
            <span>:</span>
            <span class="num">47</span>
          </div>
        </div>
      </div>

      <!-- 商品名称 -->
      <div class="name">
        <p>
          第三户大叔大赛胡大户和大叔段和大赛胡第三户大叔大赛胡大户和大叔段和大赛胡
        </p>
        <div>
          <img src="@/assets/focus.png" alt="" />
        </div>
      </div>

      <!-- 图文详情 -->
      <div class="imgdetail">
        <p class="title">图文详情</p>
        <div v-html="content"></div>
      </div>

      <!-- 商品购物车功能 -->
      <van-goods-action>
        <van-goods-action-icon icon="home-o" text="首页" to="/home" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="$store.state.cart.number"
          @click="$router.push('/cart')"
        />
        <van-goods-action-button
          :color="color"
          type="primary"
          text="立即购买"
          @click="showPoP(0)"
        />
        <van-goods-action-button
          :color="color1"
          type="warning"
          text="加入购物车"
          @click="showPoP(1)"
        />
      </van-goods-action>

      <!--弹出 -->
      <van-popup
      round
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '60%' }"
      >
      <div class="header">
        <div class="img_wrap">
          <img :src="sku.pic" alt="">
        </div>
        <div class="info">
            <div class="info_item">
                <div class="info_price">
                  <p class="now_price">￥{{sku.originalPrice}}</p>
                  <p class="old_price">
                    <span>到手价￥</span>
                    <span class="big">{{sku.minPrice}}</span>
                  </p>
                </div>
                <div class="code">商品编码{{sku.userId}}</div>
                <div class="info_conten">{{sku.name}}</div>
            </div>
        </div>
      </div>
      <div class="container_c">
                <div class="buy-content">
        <div class="abosult_content">
           <p>系列</p>
           <div class="detail_pro">
              <div class="items">
                <img src="../../assets/logo.png" alt="">
                <p>白色衣服</p>
              </div>
                 <div class="items">
                <img src="../../assets/logo.png" alt="">
                <p>白色衣服</p>
              </div>
                 <div class="items">
                     <img src="../../assets/logo.png" alt="">
                <p>白色衣大互惠互惠服</p>
              </div>
                    <div class="items">
                <img src="../../assets/logo.png" alt="">
                <p>白色衣服</p>
              </div>
                 <div class="items">
                <img src="../../assets/logo.png" alt="">
                <p>白色衣服</p>
              </div>
           </div>
        </div>
      </div>

      <div class="buy_num">
          <p>购买数量</p>
          <div class="util">
            <p>-</p>
            <span>{{sku.num}}</span>
            <p>+</p>
          </div>
      </div>
      </div>

      <div class="buy_button">
         <button>立即购买</button>
         <button @click="addCart">加入购物车</button>
      </div>

      </van-popup>
    </div>
  </div>
</template>
<script>
import Nav from '_components/Nav'
import { fetchDetail, fetchAddCart } from '_api'
import { getToken } from '_utils/token.js'
import { Toast } from 'vant'
export default {
  components: { Nav },
  naem: 'Detail',
  data () {
    return {
      show: false,
      color: 'linear-gradient(90deg,#fc0,#fc0',
      color1: 'linear-gradient(90deg,#f60,#f60)',
      basicInfo: {}, // 基础信息
      content: '', // 富文本
      pics: [], // 轮播数据
      headName: '详情页',
      sku: {}, // 商品规格
      actionStatus: 0 // 0购买 1加入购物车按钮

    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    // 获取详情数据
    fetchDetail () {
      fetchDetail(this.$route.params.id).then(res => {
        console.log(res)
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.content = res.data.data.content.replace(
            /<img/gi,
            '<img style="width:100%;diplay:block"'
          )
          this.pics = res.data.data.pics
          this.headName = this.basicInfo.name

          // 商品购买的规格
          this.sku = {
            ...this.basicInfo,
            number: 1
          }
        }
      })
    },
    // 点击弹出pop
    showPoP (code) {
      this.show = true
      this.actionStatus = code
      console.log(code)
    },
    // 立即购买
    addCart () {
      if (this.actionStatus === 1) {
        fetchAddCart({
          goodsId: this.sku.id,
          number: this.sku.number,
          token: getToken()
        }).then(res => {
          this.show = false
          if (res.data.code === 0) {
            Toast.success('加入购物车成功')
            this.$store.commit('cart/set_info', {
              item: res.data.data.item,
              number: res.data.data.number
            })
          } else {
            Toast('加入失败')
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-goods-action-button--last {
  margin-left: 0.133333rem;
  border-radius: 26.64rem;
}
.van-goods-action-button--first {
  border-radius: 26.64rem;
}
.detail {
  padding-top: 1.2rem;
  padding-bottom: 1.333333rem;
  .van-swipe {
    width: 100%;
    height: 8.666667rem;
  }
}
.van-swipe-item {
  img {
    width: 100%;
  }
}
.price {
  height: 2rem;
  background-color: chocolate;
  display: flex;
  &_left {
    flex: 2;
    padding: 0.266667rem 0.266667rem;
    background-color: red;
  }
  &_right {
    flex: 1;
    padding: 0 0.32rem;
    background-color: #feec44;
  }
  &_item {
    color: #fff;
    .money {
      font-size: 0.4rem;
    }
    .sale {
      font-size: 0.8rem;
    }
    .hot {
      font-size: 0.32rem;
      margin-left: 0.133333rem;
    }
  }
  .old_item {
    span {
      text-decoration: line-through;
      color: #ffff;
      font-size: 0.4rem;
    }
  }
}
.price_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 2rem;
    height: 0.613333rem;
  }
  .end {
    font-size: 24px;
    color: #ea3030;
    margin: 0.133333rem 0;
  }
  .time_count span:nth-child(2n-1) {
    display: inline-block;
    width: 0.466667rem;
    height: 0.466667rem;
    line-height: 0.466667rem;
    text-align: center;
    color: #fff;
    background-color: #222;
    border-radius: 0.133333rem;
    font-size: 0.266667rem;
  }
}
.name {
  display: flex;
  height: 1.2rem;
  background-color: #ffff;
  margin: 0.133333rem 0;
  p {
    width: 90%;
    padding: 0.133333rem 0.333333rem;
    font-size: .426667rem;
    font-weight: 700;
  }
  div {
    margin-top: 0.133333rem;
    img {
      width: 0.933333rem;
      height: 0.933333rem;
    }
  }
}
.imgdetail {
  .title {
    line-height: 1.2rem;
    height: 1.2rem;
    text-align: center;
    background-color: #fff;
    font-size: 0.4rem;
    font-weight: 700;
  }
}
.van-popup--bottom.van-popup--round{

}
.header{
  position: fixed;
  padding: .32rem 0;
  width: 100%;
  background-color: #fff;
  .img_wrap{
    position: absolute;
    width: 2.8rem;
    height: 2.8rem;
    overflow: hidden;
    border: 1px solid #feec44;
    border-radius:50px;
    top: -.666667rem;
    left: .533333rem;
    z-index: 100000;
  img{
    width: 100%;
    height: 100%;
  }
  }
  .info{
    max-width: 100%;
    padding-right: .133333rem;
    margin-left: 3.733333rem;
    margin-top: .2rem;
    &_price{
      display: flex;
      margin: .666667rem  0 .213333rem;
      .now_price{
        font-size: .426667rem;
        color: #ff4422;
      }
      .old_price{
        padding: .066667rem .133333rem;
        color: #fff;
        background-color: #f42;
        display: flex;
        align-items: center;
        font-size: .32rem;
        border-radius: 5px;
        margin-left: .2rem;
        .big{
          font-size: .426667rem;
        }
      }
    }
  }
}
.code{
  font-size: .266667rem;
  color: #9999;
}
.info_conten{
  font-size: .346667rem;
  color: #222;
  margin-top: .24rem;
}
 .buy_button{
   display: flex;
  background-color: #fff;
   justify-content: space-around;
   box-sizing: border-box;
  // padding: .32rem;
  align-items: center;
  padding: 0 .32rem;
position: fixed;
left: 0;
bottom: 0;
height: 1.2rem;
// background-color: #ccc;
// border-top: 1px solid red;
 button{
   display: inline-block;
  width: 4.56rem;
   height: .88rem;
   margin-left: .066667rem;
   border:none;
   border-radius: 15px;
   outline: none;
   font-size: .373333rem;
    background-color: #fff;
  }
  button:nth-child(1){
    background-color:#feec44;
  }
    button:nth-child(2){
    background-color:#f60;
  }
}
.buy-content{
  padding-left: .32rem;
  .items{
    display: flex;
    align-items: center;
    background-color: #cccc;
    margin: .16rem .16rem 0 0;
    padding:.133333rem 24px;
    border-radius: 24px;

    img{
      width: .64rem;
      height: .64rem;
    }
    p{
       font-size: .32rem;
    }
}
}
.detail_pro{
  display: flex;
  flex-wrap: wrap;
}
.buy_num{
  padding:.266667rem .32rem;
  display: flex;
  justify-content: space-between;
  p{
    font-size: .346667rem;
    color: #222;
  }
  .util{
    display: flex;
    padding:.133333rem 0;
    justify-content: space-around;
    align-items: center;
    width: 2.933333rem;
    border: 1px solid #ccc;
    border-radius: 40px;
    p{
      width: 40px;
      height: 40px;
      border-radius: 20px;
      border: 1px solid #ccc;
      text-align: center;
      font-size: .4rem;
    }
    span{
      margin: .066667rem;
    }
  }
}
.container_c{
  padding-top: 300px;
  padding-bottom: 1.2rem;
}

</style>
